<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import { login, getKnowledge } from '../../service/api'
import { getUrlSearch, addTokenToUrl } from '../../utils/token'
import { jumpHttp, isMobile } from '../../utils/host'

const knowledgeId = getUrlSearch(window.location.href, 'knowledgeId')

const { appContext } = getCurrentInstance()
const proxy = appContext.config.globalProperties
const toast = proxy.$toast

const detail = ref({})

const clicked = ref(false)

// 是否解决
const opsStatus = ref('0')
const solve = (status) => {
  if (clicked.value) {
    toast('亲，您已反馈过了啊')
  } else {
    if (status === opsStatus.value) return
    clicked.value = true
    opsStatus.value = status
  }
}

const onlineKefu = () => {
  const url = addTokenToUrl(
    'https://saas.17wanxiao.com/kefu.html',
    'token',
    'token'
  )
  if (url === 'invalid url') {
    proxy.$toast('地址解析失败，请检查配置')
    return
  }
  jumpHttp(url)
}

onMounted(() => {
  login().then(res => {
    getKnowledge({
      knowledgeId
    }).then((res) => {
      detail.value = res
    })
  }).catch(err => {
    proxy.$toast(err)
  })
})
</script>

<template>
  <div class="title">
    {{ detail.name }}
  </div>
  <div class="detail" v-html="detail.answer" />
  <div class="ops">
    <div @click="solve('1')">
      <img
        v-if="opsStatus === '0' || opsStatus === '2'"
        src="../../assets/img/good2.png"
      >
      <img v-if="opsStatus === '1'" src="../../assets/img/good1.png">
      <span :class="{ active: opsStatus === '1' }">有用</span>
    </div>
    <div @click="solve('2')">
      <img
        v-if="opsStatus === '0' || opsStatus === '1'"
        src="../../assets/img/nogood2.png"
      >
      <img v-if="opsStatus === '2'" src="../../assets/img/nogood1.png">
      <span :class="{ active: opsStatus === '2' }">没用</span>
    </div>
  </div>
  <div class="footer">
    未找到满意答案？联系
    <span @click="onlineKefu">在线客服</span>
  </div>
</template>

<style lang="less">
.title {
  font-size: 0.56rem;
  color: #444;
  padding: 0.56rem 0.32rem 0.22rem 0.32rem;
  font-weight: bold;
}
.detail {
  padding: 0 0.36rem;
  color: #444;
  font-size: 0.34rem;
  line-height: 0.5rem;
}
.ops {
  width: 2.6rem;
  height: 0.4rem;
  margin: 1.4rem auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #999;
  font-size: 0.28rem;
  div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      width: 0.36rem;
      height: 0.36rem;
      margin-right: 0.12rem;
    }
  }
}
.footer {
  color: #999;
  font-size: 0.24rem;
  text-align: center;
  width: 100%;
  height: 6%;
  padding-top: 3%;
  position: fixed;
  bottom: 0;
  background: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  span {
    color: #ffb82f;
    font-size: 0.24rem;
  }
}
</style>
